<template>
	<div class="c-container">
		<div class="c-title">游戏列表</div>
		<div class="c-body">
			<div class="list-con">
				<div class="container-top">
					<div class="card" v-for="(game,index) in games" :key="index">
						<div class="card-img">
							<img src="./../../static/img/game.png" alt="">
						</div>
						<div class="card-name">{{game.gname}}</div>
						<div class="card-intro">{{game.gintro}}</div>
						<div class="card-layer">
							<a href="javascript:void(0)" @click="gameEditBtn(index)">编辑</a>
							<a href="javascript:void(0)" @click="gameDeleteBtn(index)">查看详情</a>
						</div>
					</div>
					<div class="card">
						<div class="card-img">
							<img src="./../../static/img/game2.png" alt="">
						</div>
						<div class="card-name">扫雷</div>
						<div class="card-intro">这是一款扫雷游戏这是一款扫雷游戏这是一款扫雷游戏这是一款扫雷游戏</div>
						<div class="card-layer">
							<a href="javascript:void(0)">编辑</a>
							<a href="javascript:void(0)">查看详情</a>
						</div>
					</div>
				</div>
				<div class="container-bottom">
					<div class="popup" v-if="visible_detail">
						<div class="title">游戏关卡详情
							<button @click="hideDetailFn">close</button>
						</div>
						<div class="body">
							<div class="list-item">
								<div class="small">id</div>
								<div>所属游戏</div>
								<div class="small">关卡难度</div>
								<div class="small">关卡别名</div>
								<div class="small">规格</div>
								<div class="small">炸弹数量</div>
								<div>时间奖励</div>
								<div>完成奖励</div>
								<div>消灭奖励</div>
								<div>操作</div>
							</div>
							<div class="list-item" v-for="(level,index) in levels" :key="index">
								<div class="small">{{level.mcId}}</div>
								<div>{{'扫雷'}}</div>
								<div class="small">{{level.level}}</div>
								<div class="small">{{level.alias}}</div>
								<div class="small">{{level.specification}}</div>
								<div class="small">{{level.amount}}</div>
								<div>{{level.timeBonus}}</div>
								<div>{{level.completeBonus}}</div>
								<div>{{level.dissolveBonus}}</div>
								<div>
									<button>编辑</button>
								</div>
							</div>
						</div>
					</div>
				</div>

				<div class="popup" v-if="visible_edit">
					<div class="title">编辑
						<button @click="hideEditFn">close</button>
					</div>
					<div class="body">
						<div class="form-item">
							<label for="gname">游戏名</label>
							<div>
								<input id="gname" type="text" v-model="editGame.gname">
							</div>
						</div>
						<div class="form-item">
							<label for="gface">游戏封面</label>
							<div>
								<input id="gface" type="text">
							</div>
						</div>
						<div class="form-item">
							<label for="gintro">游戏简介</label>
							<div>
								<input id="gintro" type="text" v-model="editGame.gintro">
							</div>
						</div>
						<div class="form-item">
							<label for="status">游戏状态</label>
							<div>
								<input id="status" type="text" v-model="editGame.status">
							</div>
						</div>
						<div class="form-item">
							<button @click="gameInfoSaveBtn">保存</button>
							<button @click="hideEditFn">取消</button>
						</div>
					</div>
				</div>

			</div>
			<div class="list-page">
				page
			</div>

		</div>
	</div>
</template>
<script>
import Axios from 'axios'
export default {
	name: 'userList',
	components: {},
	data() {
		return {
			games:[],
			editGame:{},
			visible_edit: false,
			visible_detail: false,
			defaultIndex: 0,
			levels: [],
		}
	},
	created() {
		this.init()
	},
	computed: {},
	methods: {
		init() {
			Axios({
				url: '/apis/gameList',
				method: 'post'
			}).then(response => {
				let { code, data, msg } = response.data
				if (code == 0) {
					this.games = data
				}
			})
		},
		cpStatus(value) {
			let str = '错误'
			switch (Number(value)) {
				case 0:
					str = '正常'
					break
				case 1:
					str = '冻结'
					break
			}
			return str
		},
		// comUserFace(face) {
		// 	return './../static/userFace/' + (face ? face : 1) + '.png'
		// },
		// delUser(index) {
		// 	console.log(index)
		// },

		visibleEditFn() {
			this.visible_edit = true
		},
		hideEditFn() {
			this.visible_edit = false
		},
		visibleDetailFn() {
			this.visible_detail = true
		},
		hideDetailFn() {
			this.visible_detail = false
		},
		gameEditBtn(index) {
			this.defaultIndex = index;
			this.editGame=Object.assign({}, this.games[index]);
			this.visibleEditFn();
		},
		gameDeleteBtn(index) {
			this.defaultIndex = index;
			this.visibleDetailFn();
			this.getLevels();
		},
		getLevels() {
			Axios({
				url: '/apis/minesConfigList',
				method: 'post',

			}).then((response) => {
				console.log(response)
				let { code, data, msg } = response.data;
				console.log(code)
				if (code == 0) {
					this.levels = data;

				}
			})
		},
		gameInfoSaveBtn(){
			Axios({
				url:'/apis/gameInfoEdit',
				method:'post',
				params:{
					...this.editGame
				}
			}).then((response)=>{
				console.log(response)
			})
		},
	}
}
</script>
<style lang='scss'>
.c-container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  .c-title {
    width: 100%;
    height: 40px;
    line-height: 40px;
    border-bottom: 1px solid #ddd;
  }
  .c-body {
    flex: 1;
    width: 100%;
    display: flex;
    flex-direction: column;
    .list-con {
      flex: 1;
      overflow-y: auto;
      position: relative;
      display: flex;
      flex-direction: column;
      .container-top,
      .container-bottom {
        flex: 1;
        display: flex;
        flex-direction: row;
        position: relative;
      }
    }
    .list-page {
      height: 40px;
      border-top: 1px solid #ddd;
    }
  }
}
/*列表*/
.list-item {
  height: 40px;
  display: flex;
  flex-direction: row;
  background: #fefefe;
  > div {
    flex: 1;
    line-height: 40px;
    min-width: 80px;
    padding-left: 10px;
    box-sizing: border-box;
    overflow: hidden;
    text-overflow: ellipsis;
    &:nth-child(2n) {
      background: #f6f6f6;
    }
    > img {
      width: 40px;
      height: 40px;
      border-radius: 100%;
    }
  }
  .small {
    flex: none;
    text-align: center;
  }
  &:first-child {
    > div {
      text-align: center;
    }
  }
  &:nth-child(2n) {
    background: #f6f6f6;
    > div {
      &:nth-child(2n) {
        background: #fefefe;
      }
    }
  }
}
/*弹层*/
.popup {
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: #ffffff;
  display: flex;
  flex-direction: column;
  .title {
    height: 40px;
    padding: 0 10px;
    border-bottom: 1px solid #ddd;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    background: #00bcd4;
    color: #fff;
  }
  .body {
    flex: 1;
  }
}
/*卡片*/
.card {
  width: 180px;
  height: 250px;
  overflow: hidden;
  box-shadow: 1px 2px 2px 2px #a8acba;
  position: relative;
  display: flex;
  flex-direction: column;
  background: #fefefe;
  margin: 10px;
  .card-img {
    width: 100%;
    text-align: center;
    > img {
      width: 80%;
      border-radius: 100%;
    }
  }
  .card-name,
  .card-intro {
    padding: 5px;
  }
  .card-intro {
    // overflow-y: auto;
    overflow: hidden;
  }
  .card-layer {
    height: 50px;
    width: 100%;
    position: absolute;
    bottom: -50px;
    left: 0;
    background: rgba($color: #000, $alpha: 0.8);
    transition: all 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    > a {
      flex: 1;
      color: inherit;
      text-align: center;
    }
  }
  &:hover {
    .card-layer {
      bottom: 0;
    }
  }
}

</style>